.preview-console {
	@include themify() {
		background: getThemifyVariable('console-background-color');
		border-color: getThemifyVariable('ide-border-color');
	}
	border-left: #{1 / $base-font-size}rem solid;
	border-right: #{1 / $base-font-size}rem solid;
	width: 100%;
	height: 100%;
	z-index: 1000;
	display: flex;
	flex-direction: column;

	& > {
		position:relative;
		text-align:left;
	}
}

.preview-console__header {
	@include themify() {
		background-color: getThemifyVariable('console-header-background-color');
		color: getThemifyVariable('console-header-color');
	}
	min-height: #{30 / $base-font-size}rem;
	padding: #{5 / $base-font-size}rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.preview-console__header-title {
	font-size: #{12 / $base-font-size}rem;
	font-weight: normal;
}

.preview-console__icon {
	padding-right: #{20 / $base-font-size}rem;
}

.preview-console__messages {
	display: flex;
	flex: 1;
	flex-direction: column;
	overflow-y: auto;
	& div div div:first-child {
		height: unset;
    line-height: unset;
		font-size: unset;
	}
}

.preview-console__collapse {
	padding-top: #{3 / $base-font-size}rem;
	@include icon();
	@include themify() {
		& g,
		& polygon,
		& path {
			fill: getThemifyVariable('secondary-text-color');
		}
	}
	.preview-console--collapsed & {
		display: none;
	}
}

.preview-console__expand {
	padding-top: #{3 / $base-font-size}rem;
	@include icon();
	@include themify() {
		& g,
		& polygon,
		& path {
			fill: getThemifyVariable('secondary-text-color');
		}
	}
	display: none;
	.preview-console--collapsed & {
		display: inline-block;
	}
}

.preview-console__header-buttons {
	display: flex;
	align-items: center;
}

.preview-console__clear {
	@include themify() {
		@extend %link;
		color: getThemifyVariable('secondary-text-color');
		&:hover {
			color: getThemifyVariable('heavy-text-color');
		}
	}
	background: transparent;
	border: none;
	padding-right: #{10 / $base-font-size}rem;
	.preview-console--collapsed & {
		display: none;
	}
}

.preview-console__body {
	display: flex;
	flex-direction: column;
	height: calc(100% - #{30 / $base-font-size}rem);
}
